<template>
	<div class="role" :style="{width:roleTable}">
		<div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
			<div class="listName" :style='{"color":this.$store.getters.theme[6]}'> <i class="icon iconfont">&#xe7d8;</i>
				当前位置/授权管理/
				<span>角色管理</span>
			</div>
		</div>
		<div class="right_content" v-show="roleShow">
			<el-button type="primary" @click="moudleShowFun()">
				<i class="el-icon-edit"></i>&nbsp
				添加角色
			</el-button>
			<el-table
			:data="tableData"
			border :default-sort = "{prop: 'id', order: 'ascending'}"
			style="width: 100%" @selection-change="handleSelectionChange" >
				<el-table-column align="center"
			      type="selection"
			      width="55">
			    </el-table-column>
				<el-table-column align="center"
				  label="ID" sortable  prop="id"
				  width="100">
					<template scope="scope">
						<i class="icon iconfont">&#xe7dd;</i>
						<span style="margin-left: 10px">{{ scope.row.id }}</span>
					</template>
				</el-table-column>
				<el-table-column align="center"
				  label="角色名"
				  width="350">
					<template scope="scope">
						<div slot="reference" class="name-wrapper">
							<el-tag>{{ scope.row.name }}</el-tag>
						</div>
					</template>
				</el-table-column>
				<el-table-column align="center"
				  label="所属部门"
				  width="350">
					<template scope="scope">
						<div slot="reference" class="name-wrapper">
							<el-tag>{{ scope.row.description }}</el-tag>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template scope="scope">
						<el-button
				      size="small"
				      @click="roleEdit(scope.$index, scope.row)">编辑角色</el-button>
						<el-button
				      size="small"
				      @click="handleEdit(scope.$index, scope.row)">编辑权限</el-button>
						<el-button
				      size="small"
				      type="danger"
				      @click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-button type="danger" @click="handleDeleteAll()" class="deleteBtn" v-show="deleteBtn">
				<i class="el-icon-delete"></i>&nbsp
				全部删除
			</el-button>
		</div>
		<!-- v-show="!roleShow" -->
		<div class="right_content revamp" v-show="!roleShow">
			<el-button type="primary" @click="roleShow = !roleShow" style="margin-bottom:10px;">
				<i class="el-icon-d-arrow-left"></i>&nbsp
				返回列表
			</el-button>
			<div class="roleTree"> 
				<el-tree
				  :data="moudelData"
				  show-checkbox
				  :props="defaultProps"
				  node-key="functionId"
				  ref="tree"
				  default-expand-all
				  :expand-on-click-node="false"
				  :render-content="renderContent">
				</el-tree>
			</div>
			<div class="roleSub">
				<el-button type="primary" @click="roleAddForm()">立即提交</el-button>
				<el-button @click="roleReset()">重置</el-button>
			</div>
		</div>
		<div class="addRoleShade" v-show="moudleShow">
			<div class="addRoleChoose">
				 <div class="vicp-close"  @click="moudleShow=false"> <i class="el-icon-close vicp-icon4"></i>
				</div>
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
					<h5>添加角色</h5>
					<el-form-item label="角色名" prop="name">
						<el-input v-model="ruleForm.name"></el-input>
					</el-form-item>
					<el-form-item label="所属部门" prop="department">
						<el-input v-model="ruleForm.description"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
						<el-button @click="resetForm('ruleForm')">重置</el-button>
					</el-form-item>
				</el-form>
			</div> 
		</div>
		<div class="revampRoleShade" v-show="revampShow">
			<div class="revampRoleChoose">
				 <div class="vicp-close"  @click="revampShow=false"> <i class="el-icon-close vicp-icon4"></i>
				</div>
				<el-form :model="revampForm" :rules="revampRules" ref="revampForm" label-width="100px" class="demo-ruleForm">
					<h5>修改角色</h5>
					<el-form-item label="角色名" prop="name">
						<el-input v-model="revampForm.name"></el-input>
					</el-form-item>
					<el-form-item label="所属部门">
						<el-input v-model="revampForm.description"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitRevamp('revampForm')">立即修改</el-button>
						<el-button @click="resetRevamp('revampForm')">重置</el-button>
					</el-form-item>
				</el-form>
			</div> 
		</div>
		<div class="filterShade" v-show="filterShow">
			<div class="filterChoose">
				 <div class="vicp-close"  @click="filterShow=false"> <i class="el-icon-close vicp-icon4"></i>
				</div>
				<el-form :model="controlForm"  ref="controlForm" label-width="100px" class="demo-ruleForm">
					<h5>{{controlForm.functionId}}设置过滤</h5>
					<el-form-item label="过滤名1">
						<el-input v-model="controlForm.filter1"></el-input>
					</el-form-item>
					<el-form-item label="过滤值1">
						<el-input v-model="controlForm.filterVal1"></el-input>
					</el-form-item>
					<el-form-item label="过滤名2">
						<el-input v-model="controlForm.filter2"></el-input>
					</el-form-item>
					<el-form-item label="过滤值2">
						<el-input v-model="controlForm.filterVal2"></el-input>
					</el-form-item>
					<el-form-item label="过滤名3">
						<el-input v-model="controlForm.filter3"></el-input>
					</el-form-item>
					<el-form-item label="过滤值3">
						<el-input v-model="controlForm.filterVal3"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="controlSub('controlForm')">立即创建</el-button>
						<el-button @click="controlReset('controlForm')">重置</el-button>
					</el-form-item>
				</el-form>
			</div> 
		</div>
	</div>
</template>
<style lang="stylus" rel="stylesheet/stylus" src="./role.styl"></style>
<script src="./role.js"></script>